<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webSocket</title>
    <script src="js/jquery.js"></script>
    <script src="js/sockjs.min.js"></script>
    <script src="js/stomp.js"></script>
</head>
<body>
<head>
    <title>Welcome</title>
</head>
<body>
<h1>Welcome to homepage!</h1>
<p>Online Users: <b id="online-users">0</b></p>
</body>
</body>
<script type="text/javascript">
    function init(){
        connect(1);
    }
    init();
    function connect(empNo) {
        var socket = new SockJS('/endpointWisely'); //1
        var stompClient = Stomp.over(socket);
        stompClient.connect({empNo: empNo}, function (frame) {
            console.log('Connected: ' + frame);
            stompClient.subscribe('/topic/getResponse', function (response) { //2
                var elem = document.getElementById("online-users");
                elem.textContent = response.body;
            });

            // 刚连接的时候执行，初始化数据，只执行一次
            stompClient.subscribe('/app/welcome', function (response) {
                var elem = document.getElementById("online-users");
                elem.textContent = response.body;
            });

            stompClient.subscribe('/queue/1/message', function (greeting) {
                console.log(greeting);
            });
        });

        //监听窗口关闭
        window.onbeforeunload = function (event) {
            socket.close()
        }
    }
</script>
</html>